<template>
  <div class="root">
    <!-- 导航加logo -->
    <div class="logo_nav container">
      <div class="logo">
        <img src="../../assets/logo.png" alt="" />
      </div>

      <div class="nav">
        <ul>
          <li>
            <router-link class="navTo" to="/index">首页</router-link>
          </li>
          <li>
            <router-link class="navTo" to="/layout/broker"
              >房产经纪</router-link
            >
          </li>
          <li>
            <router-link class="navTo" to="/layout/category"
              >地产分类</router-link
            >
          </li>
          <li>
            <router-link class="navTo" to="/layout/aboutUs"
              >关于我们</router-link
            >
          </li>
        </ul>
      </div>
    </div>

    <!-- banner -->
    <div class="banner">
      <!-- <img src="../../assets/banner.png" alt="" /> -->
    </div>

    <!-- 主体 -->
    <div class="floor container">
      <h4>ENJOY</h4>
      <h3>您可以欣赏以下分类</h3>
      <h3 class="line">▔</h3>
      <div class="category">
        <div class="gongyu">
          <div class="gongyu_img"></div>
          <h3>公寓</h3>
        </div>
        <div class="bieshu">
          <div class="bieshu_img"></div>
          <h3>别墅</h3>
        </div>
        <div class="shangpu">
          <div class="shangpu_img"></div>
          <h3>商铺</h3>
        </div>
      </div>
    </div>

    <!-- 经营理念 -->
    <div class="idea">
      <div class="left container">
        <h4>IDEA</h4>
        <h2>我们的经营理念</h2>
        <h3 class="line">▔</h3>
        <p>倡导自然, 健康的生活方式</p>
        <p>我们有舒适环境</p>
        <p>雅致.开放的空间, 真诚,友爱的服务</p>
        <p>在酒店你可以相互搜雅致.开放的空间, 真诚,友爱的服务</p>
      </div>
    </div>

    <!-- 专业团队 -->
    <div class="team">
      <!-- 律师团队 -->
      <div class="floor container">
        <h4>SPECIALTY</h4>
        <h3>我们拥有专业的团队</h3>
        <h3 class="line">▔</h3>
        <div class="zhuanye"></div>
        <h3>金牌律师团队</h3>
        <h3 class="line">▔</h3>
        <div class="category">
          <div class="gongyu">
            <div class="gongyu_img"></div>
            <h3>张律</h3>
          </div>
          <div class="bieshu">
            <div class="bieshu_img"></div>
            <h3>罗律</h3>
          </div>
        </div>
      </div>
      <div class="floor container">
        <h3>销售精英团队</h3>
        <h3 class="line">▔</h3>
      </div>

      <!-- 销售团队 -->
      <div class="container broker_list">
        <div class="broker_item">
          <div class="broker_img">
            <!-- <img src="../../assets/images/yue.jpg" alt="" /> -->
          </div>
          <div class="broker_info">
            <div class="broker_name">
              <h3>少司命</h3>
            </div>
            <div class="broker_intro">
              令人闻风丧胆的死亡使者之一。性情冷漠，有着与年龄不相符的高深武功。总是以面纱遮面，传说她美若天仙，但这世上还没有人见过她面纱之下的真正面目。
            </div>
            <div class="broker_btn">
              <i class="el-icon-star-off"></i>
            </div>
          </div>
        </div>
        <div class="broker_item">
          <div class="broker_img">
            <!-- <img src="../../assets/images/yue.jpg" alt="" /> -->
          </div>
          <div class="broker_info">
            <div class="broker_name">
              <h3>项少羽</h3>
            </div>
            <div class="broker_intro">
              楚将项燕之孙，被秦国用重金悬赏的楚国项氏一族少主。天赋异禀，有千斤拔鼎之神力。智勇双全，年纪虽小，临阵决敌却已有大将之风，为人仗义。
            </div>
            <div class="broker_btn">
              <i class="el-icon-star-off"></i>
            </div>
          </div>
        </div>

        <div class="broker_item">
          <div class="broker_img">
            <!-- <img src="../../assets/images/yue.jpg" alt="" /> -->
          </div>
          <div class="broker_info">
            <div class="broker_name">
              <h3>荆天明</h3>
            </div>
            <div class="broker_intro">
              父亲是墨家绝顶剑客荆轲，母亲是倾国倾城的丽姬。为人古灵精怪却又有些不知天高地厚，但十分重义气。
            </div>
            <div class="broker_btn">
              <i class="el-icon-star-off"></i>
            </div>
          </div>
        </div>
        <div class="broker_item">
          <div class="broker_img">
            <!-- <img src="../../assets/images/yue.jpg" alt="" /> -->
          </div>
          <div class="broker_info">
            <div class="broker_name">
              <h3>姬如千泷</h3>
            </div>
            <div class="broker_intro">
              燕太子丹之女，原是燕国公主，封号“高月”。天真无邪，温柔婉约，言谈举止间却仍有一股与生俱来的高贵气质。
            </div>
            <div class="broker_btn">
              <i class="el-icon-star-off"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div class="container footer_info">
        <!-- 第一列 -->
        <dl>
          <dt>空山新雨后---天气晚来秋</dt>
          <dd>中国年轻一代用得更多的旅游网站</dd>
          <dd>上亿旅行者共同打造的"旅行神器"</dd>
          <dd>60,000 多个全球旅游目的地</dd>
          <dd>600,000 个细分目的地新玩法</dd>
          <dd>38,000 家旅游产品供应商</dd>
        </dl>
        <!-- 第二列 -->
        <dl>
          <dt>关于我们</dt>
          <dd>隐私政策商标声明</dd>
          <dd>服务协议</dd>
          <dd>商城平台服务协议</dd>
          <dd>网络信息侵权通知指引</dd>
          <dd>马蜂窝旅游网服务监督员</dd>
          <dd>网站地图加入马蜂窝</dd>
        </dl>
        <!-- 第三列 -->
        <dl>
          <dt>旅行服务</dt>
          <dd>旅游攻略&nbsp;&nbsp;&nbsp;&nbsp; 酒店预订</dd>
          <dd>旅游攻略&nbsp;&nbsp;&nbsp;&nbsp; 酒店预订</dd>
          <dd>旅游特价&nbsp;&nbsp;&nbsp;&nbsp; 国际租车</dd>
          <dd>旅游问答&nbsp;&nbsp;&nbsp;&nbsp; 旅游保险</dd>
          <dd>旅游指南&nbsp;&nbsp;&nbsp;&nbsp; 订火车票</dd>
        </dl>

        <!-- 扫码 -->
        <div class="qrCode">
          <img src="../../assets/images/5.jpg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.root {
  // height: 5000px;
}
.container {
  width: 1200px;
  margin: 0 auto;
}

.logo_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  .logo {
    height: 90px;
    line-height: 90px;
    img {
      height: 100%;
    }
  }

  .nav {
    ul {
      display: flex;
      li {
        font-size: 20px;
        height: 90px;
        line-height: 90px;
        margin-right: 70px;
        color: #666666;
        .navTo {
          &:hover {
            color: #f29222;
          }
        }
      }
    }
  }
}

.banner {
  height: 700px;
  background-image: url(../../assets/banner.png);
  background-repeat: no-repeat;
}

.floor {
  margin-top: 70px;
  text-align: center;
  h3 {
    font-size: 26px;
    color: #504947;
    margin-top: 20px;
  }
  h4 {
    font-size: 20px;
    color: #cccccc;
  }
  .line {
    margin-top: 30px;
  }

  .category {
    div {
      div {
        border-radius: 20px;
        transition: all 0.5s; /*持续时间*/

        &:hover {
          margin-top: 0px; /*和hover的margin-top有对比，原无30,现在0，相当于上移了,30px*/
          box-shadow: 0 0 20px 2px #918f8f; /*盒子阴影*/

          transform: translateY(3px);
        }
      }
    }

    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;
    h3 {
      font-weight: normal;
      color: #504947;
    }
    .gongyu {
      .gongyu_img {
        width: 336px;
        height: 407px;
        background-image: url(../../assets/images/gongyu.jpg);
        background-repeat: no-repeat;
        background-size: cover;
      }
    }

    .bieshu {
      .bieshu_img {
        width: 336px;
        height: 407px;
        background-image: url(../../assets/images/bieshu.jpg);
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
    .shangpu {
      .shangpu_img {
        width: 336px;
        height: 407px;
        background-image: url(../../assets/images/sp.png);
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
  }
}

.idea {
  height: 500px;
  background-color: #f4f4f4;
  background-image: url(../../assets/idea.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 100px;
  display: flex;
  align-items: center;
  padding-left: 150px;
  color: #514947;
  .left {
    // width: 300px;
    H4 {
      font-size: 14px;
      font-weight: normal;
      color: #cccccc;
    }
    h2 {
      font-size: 24px;
    }
    .line {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    p {
      line-height: 2;
      font-size: 14px;
    }
  }
}

.zhuanye {
  margin-bottom: 50px;
  height: 500px;
  background-image: url(../../assets/zhuanye.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.team {
  .category {
    div {
      div {
        border-radius: 20px;
        transition: all 0.5s; /*持续时间*/

        &:hover {
          margin-top: 0px; /*和hover的margin-top有对比，原无30,现在0，相当于上移了,30px*/
          box-shadow: 0 0 20px 2px #918f8f; /*盒子阴影*/

          transform: translateY(3px);
        }
      }
    }
    .gongyu {
      .gongyu_img {
        border-radius: 20px;
        width: 336px;
        height: 407px;
        background-image: url(../../assets/zw.png);
        background-repeat: no-repeat;
        background-size: contain;
      }
    }

    .bieshu {
      .bieshu_img {
        border-radius: 20px;
        width: 336px;
        height: 407px;
        background-image: url(../../assets/lx.png);
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
  }
}

.broker_list {
  padding: 20px 0 0 0;
  display: flex;
  justify-content: space-evenly;
  overflow: hidden;
  .broker_item {
    // float: left;
    margin-left: 30px;
    margin-bottom: 30px;
    position: relative;
    width: 30%;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    .broker_img {
      background-image: url(../../assets/images/ssm.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      height: 350px;
    }
    &:nth-child(2) {
      .broker_img {
        background-image: url(../../assets/images/sy.jpg);
      }
    }
    &:nth-child(3) {
      .broker_img {
        background-image: url(../../assets/images/tm.jpg);
      }
    }
    &:nth-child(4) {
      .broker_img {
        background-image: url(../../assets/images/yue.jpg);
      }
    }

    .broker_info {
      border-radius: 0 20px 0 0;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 250px;
      width: 80%;
      background-color: #fff;
      padding: 25px 20px;

      .broker_name {
        margin-bottom: 15px;
      }
    }

    .broker_btn {
      position: absolute;
      right: 0;
      bottom: 0;
      border-radius: 20px 0 0 0;
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      text-align: center;
      color: #fff;
      background-color: #e570d1;
    }
    transition: all 0.5s; /*持续时间*/

    &:hover {
      margin-top: 0px; /*和hover的margin-top有对比，原无30,现在0，相当于上移了,30px*/
      box-shadow: 0 0 20px 2px #918f8f; /*盒子阴影*/

      transform: translateY(3px);
    }
  }
}

// 底部
.footer {
  margin-top: 20px;
  height: 270px;
  background-color: #3c3c3c;
  .footer_info {
    padding: 40px 20px;
    color: #fff;
    display: flex;
    border-bottom: 1px solid #fff;
    dl {
      margin-right: 80px;
      dt {
        font-size: 16px;
        margin-bottom: 10px;
      }
      dd {
        font-size: 12px;
        line-height: 1.8;
      }
    }

    .qrCode {
      width: 250px;
      margin-top: 10px;
      margin-left: 30px;
      img {
        width: 100%;
      }
    }
  }
}
</style>